/*
* @Description:网络清理
* @Author: lil
* @Date: 2021/11/22
**/
<template>
  <div>
    <div class="clean">
      <div class="clean-hd">
        <el-button type="danger" icon="iconfont  zfsoft-shanchu" @click="cleanFabric">清理区块链网络</el-button>
      </div>
      <div class="clean-bd">
        <div class="clean-bd-main">
          <pre class="deploy-bd-main" id="deployShow">{{ resdata }}</pre>
          <!-- 内容 -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {
    cleanData
  } from "@/api/blockchain/blockchaindeploy";
  import {
    alertStatus
  } from "@/api/blockchain/deployhost";
  import {
    deployFabric
  } from "@/api/blockchain/networkmanage";
  export default {
    data() {
      return {
        dialogVisible: false,
        resdata: "",
        path: `ws://${process.env.VUE_APP_BASE_API_WS}/deploy/websocket/2346`,
        socket: "",
        scrollTop: null,
      };
    },

    mounted() {
      // 初始化
      this.init();
      //  this.$emit('getInfo', true);
    },

    methods: {
      init() {
        if (typeof WebSocket === "undefined") {
          this.$message.warning("您的浏览器不支持socket！");
        } else {
          this.socket = new WebSocket(this.path);
          this.socket.onopen = this.open;
          this.socket.onerror = this.error;
          this.socket.onmessage = this.getMessage;
        }
      },
      open() {
        // console.log("socket连接成功");
      },
      error() {
        // console.log("连接错误");
      },
      getMessage(msg) {
        this.resdata += msg.data + "\n";
        this.$nextTick(() => {
          let msg = document.getElementById("deployShow");
          msg.scrollTop = msg.scrollHeight;
        });
      },
      send(params) {
        this.socket.send(params);
      },
      close() {
        // console.log("socket已经关闭");
      },

      cleanFabric() {
        this.resdata = "";
        deployFabric("clean")
          .then((res) => {
            if (res.msg == 0) {
              this.$message.success("网络清理完成");
              alertStatus(0, 2, 2, 1, 2, 2);
            } else {
              this.$message.error(res.data);
              alertStatus(0, 2, 2, 1, 2, 2);
            }
          }).then(() => {
            cleanData();
          })
          .catch(() => {});
      },
    },
  };

</script>
<style lang="scss" scoped>
  .clean {
    border: 1px solid #e0e6f0;
    background-color: #fff;

    .clean-hd {
      padding: 15px 20px;

      .el-button>>>i {
        margin-right: 5px;
      }
    }

    .clean-bd {
      padding: 15px 20px;
      border-top: 1px solid #e0e6f0;

      .clean-bd-main {
        min-height: 300px;
        max-height: 650px;
        padding-right: 5px;
        overflow-y: auto;

        &>.div {
          word-break: break-all;
        }

        &::-webkit-scrollbar {
          width: 6px;
          height: 1px;
          margin: 0 5px;
        }

        &::-webkit-scrollbar-thumb {
          border-radius: 6px;
          background: #d7d7d7;
        }

        &::-webkit-scrollbar-track {
          border-radius: 10px;
          background: #fff;
        }
      }
    }
  }

</style>
